﻿
@{
    ViewBag.Title = "Result";
}

<div class="row-fluid" data-bind="with : busResultModel" id="result">
    <!-- Filter section -->
    <section class="span3 well">
        <h4>
            Filter</h4>
        <hr />
        <div>
            <strong>Fare Range</strong>
            <br />
            Rs&nbsp; <span id="minFare" data-bind="text : $root.minFare"></span>&nbsp;&nbsp;-&nbsp;&nbsp;Rs&nbsp;
            <span id="maxFare" data-bind="text : $root.maxFare"></span>
            <div id="slider-range">
            </div>
        </div>
        <hr />
        <div>
            <strong>Bus Type</strong>
            <ul data-bind="foreach : BusTypes" class="nav nav-list">
                <li>
                    <label class="checkbox">
                        <input type="checkbox" data-bind="attr: { value: $data }, checked: $root.busTypeCheckedItems" />
                        <!-- ko text : $data -->
                        <!-- /ko -->
                    </label>
                </li>
            </ul>
        </div>
        <hr />
        <div>
            <strong>Bus Operators</strong>
            <ul data-bind="foreach : BusOperators" class="nav nav-list">
                <li>
                    <label class="checkbox">
                        <input type="checkbox" data-bind="attr: { value: $data }, checked: $root.busOperatorCheckedItems" />
                        <!-- ko text : $data -->
                        <!-- /ko -->
                    </label>
                </li>
            </ul>
        </div>
    </section>
    <!-- End Filter Section  -->
    <div class="span9">
        <!-- TODO show error message  -->
        <div class="alert alert-error" data-bind="visible : $root.busResults().length == 0">
            <strong>No Record found!!!</strong>
        </div>
        <div class="well" data-bind="visible : $root.busResults().length > 0">
            <strong>Sort&nbsp;</strong>
            <div data-bind="foreach: $root.sortingColumns" class="btn-group inline " data-toggle="buttons-checkbox">
                <div class="btn btn-mini" data-bind="text : $data, click : $root.sortByColumnName">
                </div>
            </div>
        </div>
        <section id="no-more-tables" data-bind="visible : $root.busResults().length > 0">
            <table class="table-bordered table-striped table-condensed cf">
                <thead class="cf">
                    <tr>
                        <th>Travel</th>
                        <th>Depart</th>
                        <th>Arrive</th>
                        <th class="numeric">Seat</th>
                        <th class="numeric">Fare</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: $root.busResults">
                    <tr>
                        <td data-title="Travel">
                            <a rel="tooltip" href="javascript:void(0)" data-toggle="tooltip" data-placement="right" data-bind="attr : {title : Amenities}">
                                <i class="icon-info-sign"></i></a><span data-bind="text: CompanyName"></span>
                        </td>
                        <td data-title="Depart">
                            <span data-bind="text: DepartureTime"></span>
                        </td>
                        <td data-title="Arrive">
                            <a rel="tooltip" href="javascript:void(0)" data-toggle="tooltip" data-placement="right" data-bind="attr : {title : ArrivalDate}">
                                <i class="icon-info-sign"></i></a><span data-bind="text: ArrivalTime"></span>
                        </td>
                        <td data-title="Seat" class="numeric">
                            <span data-bind="text: Seats"></span>
                        </td>
                        <td data-title="Fare">
                            <span data-bind="text: formatCurrency(Fare)"></span>
                        </td>
                        <td>
                            <a class="btn btn-info" href="#" data-bind="click : $root.selectedBus">View Sheet&nbsp;<i
                                class="icon-th-large"></i></a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </section>
    </div>
</div>
<!-- hidden values -->
    <input type="hidden" data-bind="value : $root.FromCityId"  />
    <input type="hidden" data-bind="value : $root.FromCityName" />
    <input type="hidden" data-bind="value : $root.ToCityId" />
    <input type="hidden" data-bind="value : $root.ToCityName" />
    <input type="hidden" data-bind="value : $root.JourneyDate" />

<div class="modal fade hide" data-bind="viewSheet: $root.selectedBus" id="divModel" >
<!-- ko with : $parent.busSeatMapModel -->
    <div class="modal-header">
        <button class="close" data-dismiss="modal">x</button>
        <h3 data-bind="text : $data.CompanyName"></h3>        
    </div>
    <div class="modal-body">
        <div class="alert alert-error" data-bind="visible : $root.isError">
            <span data-bind="text : $root.errorMessage"></span>
        </div>
        <div class="container-fluid">
              <div class="row-fluid">
                <div class="span10">
                    <!-- Lower Deck seats -->
                    <div style="position: relative; width: 368px; height: 140px;" class="lowerDeck" data-bind="visible: $data.LowerDeck">
                        <div style="position: relative; float: left; top: 5px; left: 5px; height: 71px;" class="lowerLabel">
                        </div>
                        <div style="position: relative; left: 18px; top: 8px; width: 0px; float: left;" 
                            class="lower-seats-area" data-bind="foreach : $data.LowerDeck">
                            <div style="padding: 0pt; position: absolute;" 
                                data-bind="click : $root.selectSheet, style : {left : $root.seatLeft($data) , top : $root.seatTop($data) }">
                                <a data-bind = "text : SeatNo, css : $root.seatCss($data), attr : {title : Fare}"
                                 href="javascript:void(0);"  ></a>
                            </div>
                        </div>
                    </div>
                    <!-- Upper Deck seats -->
                    <div style="position: relative; width: 368px; height: 140px;" class="upperDeck" data-bind="visible: $data.UpperDeck" >
                        <div style="position: relative; float: left; top: 5px; left: 5px; height: 71px;" class="upperLabel">
                        </div>
                        <div style="position: relative; left: 18px; top: 8px; width: 0px; float: left;" 
                            class="upper-seats-area" data-bind="foreach : $data.UpperDeck">
                            <div style="padding: 0pt; position: absolute;" 
                                data-bind="click : $root.selectSheet, style : {left : (Column * 24) + 'px' , top : (Row * 26) + 'px' }">
                                <a data-bind = "text : SeatNo, css : $root.seatCss($data), attr : {title : Fare}"
                                 href="javascript:void(0);"  
                                class="availableSeat" ></a>
                            </div>
                        </div>
                    </div>
                    <!-- Boarding Point --> 
                    <br />
                    <span>Bording Points</span>
                    <select data-bind="options: $data.BordingPoints, 
                                    optionsText: 'BordingPointName', optionsCaption : 'Choose....', value: $root.selectedBordingPoint"></select>
                </div>
                <div class="span2" data-bind="visible : $root.selectedSeats().length > 0"  >
                    <b>Seat(s)</b><br />
                    <div style="min-height:60px">
                    <!-- ko  foreach : $root.selectedSeats-->
                        <span class="label label-warning" data-bind="text : $data.seatNo"></span>
                    <!-- /ko -->
                    </div>
                    <br />
                    <div>
                        <b>Amount</b> <span class="label label-warning" data-bind="text : 'Rs ' + $root.selectedSeatsAmount()" ></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a class="pull-left" rel="popover" href="javascript:void(0)"  data-placement="top" data-original-title="Policy"
                         data-html="true" >
            Cancellation Policy
        </a >        
        <input type="button" value="Continue" class="btn btn-primary" data-bind="click : $root.bookBus, disable : $root.selectedSeats().length  == 0" />         
    </div>
    <!-- /ko -->
</div>

@Scripts.Render("~/bundles/knockout")
<script src="/Scripts/ViewModel/busResultViewModel.js" type="text/javascript"></script>
@section Scripts {
    <script type="text/javascript">
        (function () {
            //Bind VM
            vm = new busResultViewModel();
            ko.applyBindings(vm);
            
            var param = getParameterByName("t");
            //if (param == "" || param == "undefined") return;

            var baseUri = "/api/BusApi/" + param;
            $.getJSON(baseUri, {
                format: "json"
            })
           .done(function (data) {
               bindModel(data);
               //Tool Tip
               $('#no-more-tables [rel="tooltip"]').tooltip();
           });
       })();

    </script>
}
